<template>
  <div style="padding-top:5px;"> 
    <div v-if="imgCover" class="overlay" @click="handleClick()"></div>
    <img v-if="imgCover" :src="cover" style="width: 853px; height: 480px"/>
    <div v-if="! imgCover" id="player" style="text-align:center"> </div>
    <div style="padding-top:5px;text-align:center">
      <a class="Youtube" :href="'https://www.youtube.com/watch?v='+youtubeid">[Youtube]</a>
      <a class="Youku" :href="'https://v.youku.com/v_show/id_'+youkuid">[Youku]</a>
    </div>
  </div>
</template>

<script>
// import PlayCircle from "@/assert/play_circle.png"

export default {
  data: () => ({
    imgCover: true,
    vodPlayerJs: 'https://player.polyv.net/script/player.js',
  }),
  props: {
    polyvid: {type:String,default:"88083abbf5bcf1356e05d39666be527a_8"},
    youtubeid: {type:String},
    youkuid: {type:String},
    cover: {type:String,default:"https://dummyimage.com/1280x720/ff6a00/fff"},
  },
  methods: {
    handleClick() {
      this.imgCover = false;
      this.loadPlayerScript(this.loadPlayer);
    },
    loadPlayerScript(callback) {
      if (!window.polyvPlayer) {
        const myScript = document.createElement('script');
        myScript.setAttribute('src', this.vodPlayerJs);
        myScript.onload = callback;
        document.body.appendChild(myScript);
      } else {
        callback();
      }
    },

    loadPlayer() {
      const polyvPlayer = window.polyvPlayer;
      
      this.player = polyvPlayer({
        wrap: '#player',
        width: 853,
        height: 480,
        vid: this.polyvid ,
        autoplay: true,
      });
      this.player.on('s2j_onPlayStart', function(e) {
        this.ban_ui_text = "off";
        console.log('s2j_onPlayStart');
      });  
    }
  },
  destroyed() {
    if (this.player) {
        this.player.destroy();
    }
  }

  

}
</script>

<style lang="less" scoped>
/deep/.pv-video-player{margin: 0 auto;}
.overlay{
  position:absolute;
  transform: translateX(377px) translateY(190px);
  width: 100px; height: 100px;
  opacity: 0.5;
  background: no-repeat url("../../assets/play_circle.png");
  background-size:100px 100px;
  z-index:1;
}
.overlay:hover{opacity: 1;cursor :pointer; }

.Youtube{
  background: left no-repeat  url(""); 
  padding-left: 18px;
  padding-right: 50px;
}

.Youku{
  background: left no-repeat  url(""); 
  padding-left: 18px;
}

</style>
